<!--
 * @Author: windys
 * @Description: 
 * @Date: 2021-12-03 10:31:19
-->
<template>
    <div class="login_page">
        <a-form
            name="login_from"
            ref="formRef"
            :model="formState"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :layout="'vertical'"
        >
            <a-form-item ref="name" label="用户名" name="account">
                <a-input v-model:value="formState.account" />
            </a-form-item>
            <a-form-item ref="password" label="密码" name="password">
                <a-input v-model:value="formState.password" />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="onSubmit">登录</a-button>
                <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRaw } from 'vue';
import type { UnwrapRef } from 'vue';
import { useStore } from "vuex";
import { useRouter } from 'vue-router';
import { $loginApi } from '../../api/api'
import JSEncrypt from 'JSEncrypt'
import { message } from 'ant-design-vue';
import { Storage } from '../../utils/storage';
const jm = function (pwd: any) {
    let encrypt = new JSEncrypt();
    encrypt.setPublicKey(
        'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCfxYtZzD3Fjno9K/Xb97gIc6vO+ck/F0geBnZFuYPUohrRPFV80D0t119e/fSBb+fEA3ehom3qmAabU6dXdIRhLlTRuxvGUj9FVldx/N8G8ZoO+WrVFOGwGGp/j1/KJ0SaruSStNNkW9PKCzf3yuoD6ddzxQn17/Dor1NUVvGj9QIDAQAB'
    );
    return encrypt.encrypt(pwd);
}
interface FormState {
    account: string;
    password: string | undefined;

}
export default defineComponent({
    setup() {
        const store = useStore();
        const router = useRouter()
        const formRef = ref();
        const formState: UnwrapRef<FormState> = reactive({
            account: 'administrator',
            password: '11111111',
        });
        const rules = {
            account: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
            ],
            password: [{ required: true, message: '请输入密码', trigger: 'change' }],
        };
        const onSubmit = () => {
            formRef.value
                .validate()
                .then(async () => {
                    const data = { ...toRaw(formState) }
                    // data.password = jm(data.password)
                    // const res = await $loginApi(data)
                    // Storage.set('user', res.user)
                    // Storage.set('token', res.token)
                    // // // 登陆成功
                    // store.dispatch('GET_ROUTES')
                    // router.push({ path: "/home" });
                    // message.info('登录成功');

                    router.push({ path: "/home" });
                    message.info('登录成功');
                    Storage.set('user', {})
                    Storage.set('token', 'res.token')
                })

                .catch((error: any) => {
                    console.log('error', error);
                });
        };
        const resetForm = () => {
            formRef.value.resetFields();
        };
        return {
            formRef,
            labelCol: { span: 4 },
            wrapperCol: { span: 24 },
            formState,
            rules,
            onSubmit,
            resetForm,
        };
    },
});
</script>


<style lang="scss" scoped>
.login_page {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #303d55;
    .ant-form {
        width: 500px;
        margin: 0 auto;
        margin-top: 10%;
        padding: 10px;
    }
}
</style>